<html>

	<head>
		<meta charset="UTF-8">
		<title>新增角色</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/bass.css" />
		<style>
			.layui-form input[type=checkbox] {
				display: inline-block;
			}
			
			.layui-form {
				width: 35%;
			}
			
			.layui-input {
				width: 100% !important;
			}
		</style>
	</head>

	<body>
		<div class="body">
			<header class="layui-nav" id="headerTop"></header>
			<div class="left_muen" id="left_menu"></div>
			<div class="content_body">

				<!--标题栏-->
				<p class="content_title">角色管理 &nbsp;&nbsp;>&nbsp;&nbsp;修改角色</p>
				<!--标题栏-->

				<form class="layui-form mt20">
					<div class="layui-form-item">
						<label class="layui-form-label">角色名称</label>
						<div class="layui-input-block">
							<input type="hidden" name="id" id="id">
							<input type="text" name="roleName" id="roleName" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">描述</label>
						<div class="layui-input-block">
							<textarea name="roleDesc" id="roleDesc" placeholder="请输入描述" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">分配权限</label>
						<div class="layui-input-block">
							<ul id="meunTree"></ul>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<div class="layui-btn" lay-submit="" lay-filter="submitFilter">立即提交</div>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="../../js/common/jquery-1.11.3.min.js"></script>
		<script src="../../layui/layui.js"></script>
		<script src="../../js/common/navList.js"></script>
		<script src="../../js/common/ajax.js"></script>
		<script>
			var href = window.location.href;
			var id = href.split("?")[1].split("&")[2].split("=")[1];

			layui.use(['form', 'layedit', 'upload', 'tree'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					upload = layui.upload,
					$ = layui.jquery;

				//初始化页面值
				$.ajax({
					url: baseUrl + "/role/getById?id=" + id,
					type: "GET",
					dataType: "json",
					success: function(data) {
						$("#id").val(data.id); //id
						$("#roleName").val(data.roleName); //角色名称
						$("#roleDesc").val(data.roleDesc); //描述
						var menuIds = data.menuIds;
						//console.log(menuIds);	
						//console.log(menuIds.length);	

						//初始化菜单
						$.ajax({
							url: baseUrl + "/menu/getListNoPage",
							type: "GET",
							async: false,
							success: function(data) {
								console.log(data);
								var children = "[";
								for(var i = 0; i < data.length; i++) {
									if(data[i].parentId == 0) { //一级菜单
										//根据父菜单查询子菜单
										$.ajax({
											url: baseUrl + "/menu/getListByParentId?parentId=" + data[i].id,
											type: "GET",
											async: false,
											success: function(data2) {
												console.log(data2);
												var children2 = "[";
												for(var j = 0; j < data2.length; j++) {
													if(data2[j].menuName != "燃气公司管理" && data2[j].menuName != "下游组织管理") {
														if(menuIds.indexOf(data2[j].id) >= 0) {
															children2 += "{name:'" + data2[j].menuName + "',checkboxValue:" + data2[j].id + " ,id:" + data2[j].id + ",checked: true},";
														} else {
															children2 += "{name:'" + data2[j].menuName + "',checkboxValue:" + data2[j].id + " ,id:" + data2[j].id + "},";
														}
													}
												}
												children2 = children2.substring(0, children2.length - 1) + "]";

												if(menuIds.indexOf(data[i].id) >= 0) {
													children += "{name:'" + data[i].menuName + "',checkboxValue:" + data[i].id + " ,id:" + data[i].id + ",spread: true,children:" + children2 + ",checked: true},";
												} else {
													children += "{name:'" + data[i].menuName + "',checkboxValue:" + data[i].id + " ,id:" + data[i].id + ",spread: true,children:" + children2 + "},";
												}
											}
										});
									}
								}

								children = children.substring(0, children.length - 1) + "]";
								children = eval('(' + children + ')');

								console.log(children);

								layui.tree({
									elem: '#meunTree', //指定元素，生成的树放到哪个元素上
									check: 'checkbox', //勾选风格
									skin: 'as', //设定皮肤
									drag: true, //点击每一项时是否生成提示信息
									checkboxName: 'menuIds[]', //复选框的name属性值
									checkboxStyle: "width:20px", //设置复选框的样式，必须为字符串，css样式怎么写就怎么写
									click: function(item) { //点击节点回调
										console.log(item)
									},
									nodes: [{ //节点
										name: '菜单', //节点名称
										spread: true, //展开
										children: children //必须是个json
									}],
									click: function(node) {
										console.log(node) //node即为当前点击的节点数据
									}
								});
							}
						});

					}
				});

				//复选框点击获取点击的id
				/* var menuIds	= [];	 */
				/* $("input[type=checkbox]").click(function(){
					console.log($(this).val());
					console.log($(this).is(':checked'));
					if($(this).is(':checked')==true){
						if(menuIds.indexOf($(this).val())==-1){
							menuIds.push($(this).val());
						}
					}
					console.log(menuIds);
				}); */

				//监听提交
				form.on('submit(submitFilter)', function(data) {
					//获取选中的checkbox的值
					var menuIds = [];
					$.each($('input:checkbox:checked'), function() {
						if($(this).val() != "on") {
							menuIds.push($(this).val());
						}
					});
					ajaxPost({
						url: '/role/update',
						data: {
							id: data.field.id, //id
							roleName: data.field.roleName, //角色名称
							roleDesc: data.field.roleDesc, //描述
							menuIds: menuIds //菜单ID集合 Integer[]
						},
						successFull: function(res) {
							console.log(res)
							layer.msg('修改成功', {
								icon: 6
							});
							window.location.href = "./roleList.html?pos=5&childPos=3";
						},
						errCallBack: function(res) {
							layer.msg(res.msg, {
								icon: 6
							});
						}
					})
				});

			});
		</script>
	</body>

</html>